<template>
    <el-table :data="resourceList" style="width: 100%" border table-layout="auto" cell-class-name="align-c">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="资源名称" />
        <el-table-column prop="url" label="资源路径" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="createTime" label="添加时间" />
    </el-table>
    <div class="page">
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryResourceList" @current-change="queryResourceList" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { getResourceListAPI } from "./api";
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const resourceList = ref<IResourceModel[]>([])

const total = ref(0)
const queryParams = reactive<IUserListParams>({
    pageNum: 1,
    pageSize: 10
})

const queryResourceList = () => {
    getResourceListAPI(queryParams).then((res) => {
        if (res.code === 200) {
            resourceList.value = res.data.list
            total.value = res.data.total
        }
    })
}
queryResourceList()
</script>
<style lang="less" scoped>
:deep(.align-c) {
    .cell {
        text-align: center !important;
    }
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>